<template>
  <div class="head">
    <header>
      <div class="nav-wrapper">
        <img src="@/assets/image/logo_01.png" alt="好融艺" />
        <div class="hry-user-wrapper">
          <span class="login">{{ company }}</span>
          <span @click="logout">退出登录</span>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    logout() {
      this.$commonJs.logout();
    }
  },
  computed: {
    company() {
      return this.$store.state.company;
    }
  }
};
</script>

<style scoped lang="less">
.head {
  webkit-box-shadow: 0rem 0rem 1rem 0rem rgba(7, 8, 8, 0.12);
  -moz-box-shadow: 0rem 0rem 1rem 0rem rgba(7, 8, 8, 0.12);
  box-shadow: 0rem 0rem 1rem 0rem rgba(7, 8, 8, 0.12);
  padding: 5.4rem 11rem 2.3rem 8rem;
  z-index: 10;
  position: relative;
  @media (max-width: 800px) {
    padding: 1rem;
  }
}
header {
  background: @white;
  .nav-wrapper {
    .flex_content ();
    .flex_justify_space();
    img {
      height: 3rem;
      @media (max-width: 800px) {
        height: 2rem;
      }
    }
    .hry-user-wrapper {
      .flex_content ();
      .flex_justify_end();
      font-size: 1.75rem;
      font-family: MicrosoftYaHei;
      color: rgba(72, 72, 71, 1);
      @media (max-width: 800px) {
        font-size: 1rem;
      }
      .login {
        color: @primary-color;
      }
      span {
        display: inline-block;
        cursor: pointer;
        &:last-child {
          &:before {
            content: "|";
            margin: 1rem;
          }
        }
      }
    }
  }
}
</style>
